var imgs = document.querySelectorAll('.main-imgbottom img');
var lis = document.querySelectorAll('.main-img-bottom li');
var box = document.querySelector('.main-imgbottom');
var shang = document.querySelector('.shang');
var next = document.querySelector('.next');

var index = 0;

// 下一张
function nextimg() {
    index = index == imgs.length - 1 ? 0 : index + 1;
    // console.log(index);
    zidong();
}
// 上一张
function shangimg() {
    index = index == 0 ? imgs.length - 1 : index - 1;
    zidong();
}
// 自动转换
function zidong() {
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].className = '';
        lis[i].className = '';
    }
    imgs[index].className = 'main-xianshi';
    lis[index].className = 'bottom-color';
    // console.log(index);
}
var timer = setInterval(nextimg, 1000);
// 鼠标放上切换图片
for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onmouseover = function () {
        clearInterval(timer);
        timer = null;
        index = this.index;
        zidong();
    }
    lis[i].onmouseout = function () {
        // console.log('2222222');
        if (timer == null) return;
        timer = setInterval(nextimg, 1000);
        shang.style.display = 'none';
        next.style.display = 'none';
    }
}
box.onmouseover = function () {
    clearInterval(timer);
    shang.style.display = 'block';
    next.style.display = 'block';
}
box.onmouseout = function () {
    timer = setInterval(nextimg, 1000);
    shang.style.display = 'none';
    next.style.display = 'none';
}
shang.onclick = function () {
    shangimg();
}
next.onclick = function () {
    nextimg();
}
// 固定导航栏

window.onscroll = function(){
    var middle = document.querySelector('.middle');
    var scrollTop = document.scrollingElement.scrollTop;
    if(scrollTop > 150){
        middle.style.position = 'fixed';
        if(middle.style.top !=0){
            setTimeout(function(){
                middle.style.top = '0px';
                middle.style.zIndex = 200;
            },100) ;          
        }
    }else{
        middle.style.cssText = '';
        middle.style.top ='-200px';       
    }
}



